<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box{
        width: 100px;
        height: 100px;
        /* background-color: #f00; */
        border: 50px solid orange;
        box-sizing: border-box ;
        /* border-right-color: green;
        border-bottom-color: rgb(115, 128, 0);
        border-left-color: rgb(128, 36, 0); */
        border-right-color: transparent;
        border-bottom-color:transparent;
        border-left-color: transparent;

        /* 旋转 */
        /* 以什么位置为中心店旋转 */
        transform-origin: center 25%; 
        transform: rotate(180deg);
    }
    #heart {
      position: relative;
      width: 100px;
      height: 90px;
    }
    #heart:before,
    #heart:after {
      position: absolute;
      content: "";
      left: 50px;
      top: 0;
      width: 50px;
      height: 80px;
      background: red;
      border-radius: 50px 50px 0 0;
      transform: rotate(-45deg);
      transform-origin: 0 100%;
    }
    #heart:after {
      left: 0;
      transform: rotate(45deg);
      transform-origin: 100% 100%;
    }
</style>
<body>
    <div class="box"></div>
    <div id="heart"></div>
</body>
</html>